<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>02.layui栅格系统</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <!-- layui-container: 容器 -->
        <div class="layui-container layui-border-box">
            <!-- layui-row: 放在行内 -->
            <div class="layui-row">
                <div class="layui-col-lg2 layui-bg-blue">
                    1/3
                </div>
                <!-- 2个格子的偏移 -->
                <div class="layui-col-lg6 layui-col-lg-offset2">
                    <!-- 列的嵌套 -->
                    <div class="layui-row">
                        <!-- sm小屏幕占4格，lg大屏幕占5格 -->
                        <div class="layui-col-sm4 layui-col-lg5 layui-bg-gray">
                            <div class="grid-demo">占用6格, 偏移2格, 橘黄色背景</div>
                        </div>
                        <div class="layui-col-lg6 layui-col-lg-offset1 layui-bg-cyan" >
                            <div class="grid-demo">hello world</div>
                        </div>
                    </div>
                </div>
                <!-- 列边距，小于30px的时候使用这个，大于的话最好使用offset -->
                <div class="layui-col-lg2 layui-bg-red layui-col-space10">
                    1/3
                </div>
            </div>
        </div>

        <!-- layui-fuild: 容器显示100%的尺寸 -->
        <div class="layui-fluid">
            <!-- layui-row: 放在行内 -->
            <div class="layui-row">
                <div class="layui-col-lg2 layui-bg-blue">
                    1/3
                </div>
                <div class="layui-col-lg6 layui-col-lg-offset2 layui-bg-orange">
                    <div class="grid-demo">占用6格, 偏移2格, 橘黄色背景</div>
                </div>
                <div class="layui-col-lg2 layui-bg-cyan">
                    1/3
                </div>
            </div>
        </div>

        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // 一般直接写在一个js文件中
            layui.use(['layer', 'form'], function() {
                var layer = layui.layer,
                    form = layui.form;
            });
        </script>
    </body>
</html>
